<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="button" value="开始" v-on:click="lang">
    <input type="button" value="停止" v-on:click="stop">
    <p v-text="msg"></p>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"刘强东你这个畜生！！！",
            id:null
        },
        methods:{
            lang(){
                if(this.id !=null)return;
                this.id = setInterval(()=>{
                    //获取第一个字符
                    var start = this.msg.substring(0,1)
                    //获取后面所有字符
                    var end = this.msg.substring(1)
                    this.msg = end + start
                    }
                ,400)
            },
            stop(){
                clearInterval(this.id);
                this.id=null;
            }
        }
    })

</script>
<p>1.这里最重要的就是，一定要加this，在vm内部如果想使用data里面的属性，或者调用methods里面的方法都必须使用this。不然就会报错-this就代表当前这个实例</p>
<p>2.lang(){} 为es6写法，解析时自动把方法名解析成为属性名，后面的函数体自动解析成function 等价于 lang:function(){}</p>
<p>3.上面使用了箭头函数，所以才能够直接使用this指代vm</p>
</body>
</html>